<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ state.count }}</h1>
    <h1>{{ count }}</h1>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    // 创建独立的响应式值作为 refs
    const count = ref(0)
    // 声明响应式状态
    const state = reactive({
      count
    })
    console.log(state.count)
    state.count = 1
    console.log(count.value)
    // const otherCount = ref(2)

    return { state, count }
  }
}
</script>

<style scoped>
</style>
